<template>
	<view class="allBody">
		<view class="topBorder">
			<view class="topTitleBorder">
				<view class="topTitleLine"></view>
				<text class="topTitleText">消息</text>
			</view>
			<view class="messageCard">
				<messageCard v-for="(item,index) in msgs.slice(0,2)" :key="index" :msg="item.msg"
					:created="item.created" v-if="len>=1"></messageCard>
			</view>
			<view v-if="len==0">
				<image class="noMore_Img" src="https://img01-xusong.91q.com/DA0A4263-8327-4064-807A-D0073350E175.png">
				</image>
			</view>
			<view class="noMore_Msg" v-if="len<2">
				<text>~~没有更多消息了哦~~</text>
			</view>
			<view @click="pageMore" v-if="len>=2">
				<text class="more">更多</text>
				<image src="../../static/arrow-right.png" class="moreImg"></image>
			</view>
		</view>
		<view class="bottomBorder">
			<view class="bottomTitleBorder">
				<view class="bottomTitleLine"></view>
				<text class="bottomTitleText">代办</text>
			</view>
		</view>
		<view>
			<view class="daibanborder"></view>
			<view @click="goManage()">
				<image class="guanliIcon" src="https://img01-xusong.91q.com/FB924AD9-FFD8-41BB-80F1-801B344F5A82.png">
				</image>
				<view class="guanliText">管理社团</view>
			</view>
			<view @click="goShenhe()">
				<image class="shenheIcon" src="https://img01-xusong.91q.com/46EE533E-414A-4FE5-ACA6-1576AD38B1E0.png">
				</image>
				<view class="shenheText">审核请求</view>
			</view>
			<view @click="goXinxi()">
				<image class="xinxiIcon" src="https://img01-xusong.91q.com/DF505948-2A84-42C1-8EC2-2B21A53283AA.png">
				</image>
				<view class="xinxiText">个人信息</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import messageCard from '../../components/messageCard.vue'
	export default {
		components: {
			messageCard
		},

		data() {
			return {
				// user_Id:this.$store.state.userInfo.id,
				user_Id: '',
				msgs: [],
				len: 0,
			};
		},
		methods: {
			loading() {
				uni.showToast({
					title: '加载中',
					icon: 'loading',
					duration: 1500,
				})
			},
			goManage() {
				if (this.$store.state.hasLogin) {
					uni.navigateTo({
						url: './managePeople'
					})
				}else{
					uni.showModal({
						content:'该功能需要授权登陆之后才能进行使用',
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'./login'
								})
							}
						}
					})
				}

			},
			goShenhe() {
				if (this.$store.state.hasLogin) {
					uni.navigateTo({
						url: './examine'
					})
				}else{
					uni.showModal({
						content:'该功能需要授权登陆之后才能进行使用',
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'./login'
								})
							}
						}
					})
				}

			},
			goXinxi() {
				uni.navigateTo({
					url: './change'
				})
			},
			getList() {
				if (this.$store.state.hasLogin) {
					let that = this
					let userId = this.user_Id
					uni.request({
						url: "https://www.codingyt.com/club/message/select",
						method: 'get',
						data: {
							userId
						},
						dataType: 'json',
						success: (res) => {

							that.msgs = res.data.data;
							this.len = this.msgs.length
							// console.log(this.len)
						},
					});
				}


			},
			pageMore() {
				uni.navigateTo({
					url: './messageMore'
				})
			}
		},
		onShow() {
			this.getList();
			this.loading()
			let that = this
			if (this.$store.state.hasLogin == true) {
				that.user_Id = this.$store.state.userInfo.id;
			}

		},
	}
</script>

<style scoped>
	.allBody {
		background: rgb(255, 255, 255);
		background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(248, 248, 248, 1) 0%);
		height: 1624rpx;
		width: 750rpx;
	}

	.topBorder {
		width: 750rpx;
		height: 690rpx;
		line-height: 40rpx;
		background-color: rgba(255, 255, 255, 100);
		color: rgba(16, 16, 16, 100);
		box-shadow: 0rpx 22rpx 18rpx -18rpx rgba(0, 0, 0, 0.4);
	}

	.topTitleBorder {
		position: relative;
		left: 46rpx;
		top: 110rpx;
		width: 200rpx;
	}

	.topTitleLine {
		width: 6rpx;
		height: 36rpx;
		border-radius: 50rpx;
		background-color: rgba(245, 166, 35, 100);
		float: left;
		position: relative;
		top: 4rpx;
	}

	.topTitleText {
		width: 96rpx;
		height: 68rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 48rpx;
		font-family: PingFangSC-medium;
		padding-left: 12rpx;
		font-weight: 600;
	}

	.messageCard {
		top: 200rpx;
		left: 68rpx;
		position: absolute;
	}

	.noMore_Img {
		left: 190rpx;
		top: 224rpx;
		width: 370rpx;
		height: 240rpx;
		position: absolute;
	}

	.noMore_Msg {
		left: 236rpx;
		top: 516rpx;
		width: 400rpx;
		height: 40rpx;
		color: rgba(155, 155, 155, 100);
		font-size: 28rpx;
		text-align: left;
		;
		position: absolute;
	}

	.more {
		position: absolute;
		left: 612rpx;
		top: 630rpx;
		width: 56rpx;
		height: 40rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		;
	}

	.moreImg {
		position: absolute;
		left: 672rpx;
		top: 634rpx;
		width: 34rpx;
		height: 34rpx;
		z-index: 50;
	}

	.bottomBorder {}

	.bottomTitleBorder {
		position: relative;
		left: 46rpx;
		top: 42rpx;
		width: 200rpx;
	}

	.bottomTitleLine {
		width: 6rpx;
		height: 36rpx;
		border-radius: 50rpx;
		background-color: rgba(245, 166, 35, 100);
		float: left;
		position: relative;
		top: 14rpx;
	}

	.bottomTitleText {
		width: 96rpx;
		height: 68rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 48rpx;
		font-family: PingFangSC-medium;
		padding-left: 12rpx;
		font-weight: 600;
	}

	.daibanborder {
		left: 50rpx;
		top: 842rpx;
		width: 652rpx;
		height: 278rpx;
		line-height: 40rpx;
		border-radius: 40rpx;
		background-color: rgba(255, 255, 255, 100);
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: center;
		box-shadow: 0rpx 30rpx 58rpx -20rpx rgba(0, 0, 0, 0.4);
		font-family: Arial;
		position: absolute;
	}

	.guanliIcon {
		left: 108rpx;
		top: 900rpx;
		width: 100rpx;
		height: 100rpx;
		position: absolute;
	}

	.guanliText {
		left: 102rpx;
		top: 1024rpx;
		width: 118rpx;
		height: 42rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		;
		position: absolute;
	}

	.shenheIcon {
		left: 328rpx;
		top: 900rpx;
		width: 98rpx;
		height: 98rpx;
		position: absolute;
	}

	.shenheText {
		left: 320rpx;
		top: 1022rpx;
		width: 112rpx;
		height: 42rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		;
		position: absolute;
	}

	.xinxiIcon {
		left: 540rpx;
		top: 892rpx;
		width: 112rpx;
		height: 112rpx;
		position: absolute;
	}

	.xinxiText {
		left: 538rpx;
		top: 1022rpx;
		width: 118rpx;
		height: 42rpx;
		color: rgba(16, 16, 16, 100);
		font-size: 28rpx;
		text-align: left;
		;
		position: absolute;
	}
</style>
